<template>
  <view class="upload">
	<view class="limit-title">最多上传{{limit}}张图片</view>
    <view class="list">
      <view class="item interval" v-for="(item,index) in fileList" :key="index">
        <image :src="item.src" v-if="item.src+'?download=0'"></image>
        <view v-if="item.progress == 100" class="icon-close iconfont iconziyuan1" @click.stop="handleRemove(index)">
          <uni-icon type="closeempty" size="20" color="#fff"></uni-icon>
        </view>
		<Your_Exios-Circle
		v-if="item.progress != 100 && item.progress != 0"
		style="position: absolute;top: 18%;left: 18%;"
		:size="50"
		successTitle= "上传成功"
		title=""
		:percent="item.progress"
		>
		</Your_Exios-Circle>
      </view>
      <view class="item" @click="chooseImage" v-if="fileList.length<limit">
        <uni-icon type="image" size="30" color="#cccccd"></uni-icon>
      </view>
    </view>
  </view>
</template>

<script>
	
	var _self
	
  export default {
    props: {
      limit: {
        type: Number,
        default: 5
      },
      url: {
        type: String,
        required: true
      },
      name: {
        type: String,
        default: 'file'
      },
	  fileDescription: {
		  type: String,
		  default: ''
	  },
      formData: {
        type: Object,
        default () {
          return {}
        }
      },
      header: {
        type: Object,
        default () {
          return {}
        }
      },
      fileList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data() {
      return {}
    },
	created() {
		_self = this
	},
    methods: {
      chooseImage() {
		if(this.fileDescription == ''){
		  	uni.showToast({
		  		icon:"none",
		  		title:"请先填写上传文件说明"
		  	})
			return
		}
        uni.chooseImage({
          success: (chooseImageRes) => {
			chooseImageRes.tempFilePaths.forEach(ct => {
				this.fileList.push({
					src: ct,
					progress : 0,
					group: "",
					md5: "",
					fileName: ""
				})
			})
			this.fileList.forEach(fl => {
				if(fl.progress == 0){
					fl.progress = 1
					console.log("fl",fl)
					console.log(_self.url)
					const uploadTask = uni.uploadFile({
					  url: _self.url+"?fileDescription="+_self.fileDescription,
					  name:"file",
					  filePath: fl.src,
					  success: (res) => {
						  console.log(res.data)
						  var response = JSON.parse(res.data)
						  // console.log(response)
						  if(response.code == 20000){
							  fl.progress = 100
							  fl.id = response.data.id
							  fl.src = response.data.fileUrl
							  fl.md5 = response.data.md5
							  fl.group = response.data.fileGroup 
							  fl.fileName = response.data.fileName
							  uni.showToast({
							  	icon:"none",
							  	title:"上传成功"
							  })
						  }else{
							  uni.showToast({
							  	icon:"none",
							  	title:"上传失败"
							  })
						  }
						  
					  },
					  fail: (err) => {
					    uni.showToast({
					    	icon:"none",
							title:"上传失败"
					    })
					  }
					})
					uploadTask.onProgressUpdate((res) => {
						if(res.progress == 100){
							fl.progress = 99
						}else{
							fl.progress = res.progress
						}
					})
				}
			})
            
          }
        })
      },
      handleRemove(index) {
		  var fl = this.fileList[index]
		  uni.request({
		  	url: _self.utils.basicUrl+"/file/delete?md5="+fl.md5+"&id="+fl.id,
		  	method: "DELETE",
		  	data: {},
		  	success: function(res) {
		  		if(res.data.code === 20000){
					uni.showToast({
						icon:"none",
						title:"删除成功"
					})
					_self.fileList.splice(index,1)
		  		}else{
		  			_self.utils.requestFail(res)
		  		}
		  	},
		  	fail: () => {
		  		uni.showToast({
		  			icon:"none",
		  			title: '网络错误'
		  		})
		  	},
		  	complete() {
		  		
		  	}
		  })
      }
    }
  }
</script>

<style lang="scss" scoped>
	
  .limit-title{
	  margin-bottom: 20rpx;
  }
  .upload {
    .list {
      display: flex;
      flex-wrap: wrap;
      .item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140upx;
        height: 140upx;
        border-radius: 8upx;
        border: 2upx solid #D9D9D9;
        background-color: #f3f3f3;
        margin-bottom: 20upx;
        &.interval {
          margin-right: 16upx;
          border: none;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 8upx;
          margin: 0;
        }
        .icon-close {
          position: absolute;
          top: 0;
          right: 0;
          width: 28upx;
          height: 28upx;
          background-color: #ff5500;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 8upx 0 0;
        }
		.progress-block{
			position: absolute;
			top: 20px;
			left: 20px;
			z-index: 1;
		}
        .icon {
          width: 48upx;
          height: 48upx;
        }
      }
    }
  }
</style>
